<template>
  <div>
    <p class="none">无底边界。</p>
    <p class="dotted">点底边界。</p>
    <p class="dashed">虚线底边界。</p>
    <p class="solid">实线底边界。</p>
    <p class="double">双线底边界。</p>
    <p class="groove">凹槽底边界。</p>
    <p class="ridge">垄状底边界。</p>
    <p class="inset">嵌入底边界。</p>
    <p class="outset">外凸底边界。</p>
  </div>
</template>

<script>
export default {
  name: "CssIds"
};
</script>

<style scoped>
p {
  border-style: solid;
}
p.none {
  border-bottom-style: none;
}
p.dotted {
  border-bottom-style: dotted;
}
p.dashed {
  border-bottom-style: dashed;
}
p.solid {
  border-bottom-style: solid;
}
p.double {
  border-bottom-style: double;
}
p.groove {
  border-bottom-style: groove;
}
p.ridge {
  border-bottom-style: ridge;
}
p.inset {
  border-bottom-style: inset;
}
p.outset {
  border-bottom-style: outset;
}
</style>
